<template>
  <el-container>
    <el-main>
      <div class="course_box">
        <el-row :gutter="24">
          <el-col :span="6" v-for="item in courseList" :key="item.id">
            <el-card shadow="hover">
              <div slot="header" class="clearfix">
                <span class="title">{{item.year}}</span>
              </div>
              <div class="course" v-for="course in item.courses" :key="course.id">
                <span>{{course.name}}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import {queryClassCourse} from "@/api/timetable";

export default {
  name: "MyCourse",
  data(){
    return{
      courseList: [],
      user: JSON.parse(sessionStorage.getItem("user")),
    }
  },
  created() {
    this.load();
  },
  methods:{
    load(){
      queryClassCourse({classId:this.user.classesId}).then(res => {
        this.courseList = res.data;
      })
    }
  },
}
</script>

<style lang="less" scoped>

.course_box{
  width: 100%;
  height: 100%;
  //background-color: #62d1ff;
  .el-card{
    background-color: #f5f5f5;
    margin-bottom: 20px;
    height: calc(50vh - 75px);
    text-align: center;
    .title{
      color: rgba(161, 21, 21, 0.99);
      font-size: 20px;
      font-weight: bolder;
    }
    .course{
      color: gray;
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
}

.el-card /deep/ .el-card__body {
  padding: 6px;
}
.el-card /deep/ .el-card__header {
  padding: 8px 20px;
  border-bottom: 1px solid #EBEEF5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 16px;
  background-color: lightgrey;
}

</style>